<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import FromDesigner from "../design/form/FormDesigner.vue";
import ProcessDesigner from "./ProcessDesigner.vue";
import BaseSetting from "./BaseSetting.vue";
import PlusSetting from "./PlusSetting.vue";
import {ElMessage} from "element-plus";

const active = ref('BaseSetting')

const activePd = computed(() => {
  return active.value === 'ProcessDesigner'
})

//设计器数据
const designData = reactive({
  name: '未命名流程',
  icon: {
    name: 'file-icons:omnigraffle',
    bgc: '#4C87F3',
    color: '#FFFFFF'
  },
  groupId: null,
  formConf: {
    conf: {
      labelPosition: 'right',//标签位置
      labelWidth: 100,//标签宽度，
      size: 'default'
    },
    components: []
  },
  //流程json
  process: [],
  remark: null
})

function switchMenu(index) {
  active.value = index
}

function doSave(){
  localStorage.setItem('designData', JSON.stringify(designData))
  ElMessage.success('保存成功')
}

function publish(){
  doSave()
}

onMounted(() => {
  const local = localStorage.getItem("designData")
  if (local) {
    const localData = JSON.parse(local)
    for (let key in designData) {
      designData[key] = localData[key]
    }
  }
})

</script>

<template>
  <div class="w-designer">
    <el-container>
      <el-header style="padding: 0">
        <el-menu :default-active="active" class="w-designer-menu" mode="horizontal" @select="switchMenu">
          <div>
            <el-button icon="ArrowLeft" circle></el-button>
            <iconify :icon="designData.icon.name" class="w-process-icon"
                     :style="{'background': designData.icon.bgc, color: designData.icon.color}"/>
            <el-text>{{designData.name}}</el-text>
          </div>
          <el-menu-item index="BaseSetting">① 基础设置</el-menu-item>
          <el-menu-item index="FormDesigner">② 表单设计</el-menu-item>
          <el-menu-item index="ProcessDesigner">③ 流程设计</el-menu-item>
          <el-menu-item index="PlusSetting">④ 扩展设置</el-menu-item>
          <div>
            <el-button icon="FolderChecked" @click="doSave" round>保存</el-button>
            <el-button icon="Promotion" type="primary"  @click="publish" round>发布</el-button>
          </div>
        </el-menu>
      </el-header>
      <el-main :class="{'w-designer-container': true, 'w-no-padding': active === 'FormDesigner'}">
        <base-setting v-model="designData" v-show="active === 'BaseSetting'"/>
        <from-designer v-model="designData.formConf" v-show="active === 'FormDesigner'"/>
        <process-designer :formItems="designData.formConf.components" v-model="designData.process" :active="activePd" v-show="activePd"/>
        <plus-setting v-model="designData" v-show="active === 'PlusSetting'"/>
      </el-main>
    </el-container>

  </div>

</template>

<style lang="less" scoped>
.w-designer {
  background: @main-bgc;

  .w-designer-menu {
    display: flex;
    align-items: center;
    background: white;
    justify-content: center;
    position: relative;

    & > div:first-child {
      position: absolute;
      left: 20px;
      display: flex;
      align-items: center;
      .w-process-icon {
        margin: 0 10px 0 20px;
      }
    }

    & > div:last-child {
      position: absolute;
      right: 20px;
    }
  }

  .w-designer-container {
    overflow: auto;
    height: calc(100vh - 60px);
  }

  .w-no-padding {
    padding: 0;
  }
}
</style>
